:root{
    --one:#1563FF;
    --two:#E34D59;
    --three: #d0deee;
    --four:#34FFBF;
    --five:#0092FF;
    --white:#fff;
}
body {
    margin: 0rem;
    padding: 0rem;
    /* font-family: '微软雅黑'; */
    /*color: #fff;*/
    position: relative;
    height: 100%;
}

html,
body {
    /* height: 100%; */
    background: #000;
    /*background-size: 100% 100%;*/
    min-width: 1900rem;
    min-height: 1080rem;
}
.head{
    width: 100%;
    height: 102rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index:100;
}
.head img{
    height: 102rem;
}
.fsLeft{
    position: absolute;
    top: 0;
    left: 24rem;
    z-index: 100;
    width: 514rem;
    height: 100%;
    padding: 102rem 0 18rem 0;
    box-sizing: border-box;

}
.left-box{
    width: 100%;
    height: 100%;
    background-image: url("../images/fs/left.png") ;
    background-size: 100% 100%;
}
.terminal-box{
    width: 100%;
    height: 250rem;
    padding: 44rem 44rem 0 41rem;
    box-sizing: border-box;
}
.terminal-title{
    width: 100%;
    height: 36rem;
    text-align: center;
    line-height: 36rem;
    font-size: 18rem;
    font-weight: 600;
    color:var(--white);
    background-image: url("../images/fs/title.png") ;
    background-size: 100% 100%;
}
.terminal-con{
    width: 100%;
    height: 142rem;
    padding: 0 16rem;
    box-sizing: border-box;
    margin-top: 32rem;
    display: flex;
    justify-content: space-between;
}
.terminal-map{
    width: 250rem;
    height: 100%;
}
.terminal-list{
    width: 117rem;
    height: 100%;
}
.terminal-item{
   width: 100%;
    height: 42rem;
    margin-bottom: 8rem;
}
.terminal-item:last-child{
    margin-bottom: 0;
}
.terminal-item-title{
    width: 100%;
    height: 16rem;
    text-align: left;
    line-height: 16rem;
    font-size: 14rem;
    font-weight: 400;
    color: var(--white);
}
.terminal-item-title span{
    display: inline-block;
    width: 8rem;
    height: 8rem;
    margin-right: 8rem;
}
.terminal-spec-one span{
    background: var(--one);
}
.terminal-spec-two span{
    background: var(--two);
}
.terminal-spec-three span{
    background: var(--three);
}
.terminal-num{
    width: 100%;
    height: 24rem;
    text-align: left;
    line-height: 24rem;
    font-size: 12rem;
    font-weight: 400;
    color: var(--three);
}
.terminal-num span{
    font-size: 20rem;
    color: var(--white);
    margin-right: 2rem;
}
.useful-box{
    width: 100%;
    height: 260rem;
    padding: 0 44rem 0 41rem;
    box-sizing: border-box;
    margin-top: 40rem;
}
.use-con{
    width: 100%;
    height: 201rem;
    margin-top: 24rem;
    padding: 0 16rem;
    box-sizing: border-box;
}
.use-tab-box{
    width: 100%;
    height: 24rem;
    display: flex;
}
.use-tab-item{
    width: 44rem;
    height: 24rem;
    text-align: center;
    line-height: 24rem;
    font-size: 14rem;
    font-weight: 400;
    color: var(--three);
    margin-right: 9rem;
    cursor: pointer;
}
.use-tab-spec{
   background: rgba(0, 146, 255, 0.2);
    border: 1px solid rgba(0, 146, 255, 0.7);
    color: var(--white);
}
.use-map-box{
    width: 100%;
    height: 152rem;
    margin-top: 24rem;
    display: flex;
    justify-content: space-between;
}
.use-map{
    width: 152rem;
    height: 152rem;
    background-image: url("../images/fs/use.png") ;
    background-size: 100% 100%;
}
.use-legend-box{
    width: 205rem;
    height: 108rem;
    margin-top: 22rem;
}
.use-legend-item{
    width: 100%;
    height: 42rem;
    display: flex;
    margin-bottom: 24rem;
}
.use-legend-item:last-child{
    margin-bottom: 0;
}
.use-legend-item-one{
    width: 50%;
    height: 100%;
}
.use-spec-one span{
 background: var(--three);
}
.use-spec-two span {
    background: var(--one);
}
.use-spec-three span{
    background: var(--four);
}
.use-spec-four span{
    background: var(--five);
}
.per-town-box{
    width: 100%;
    height: 326rem;
    margin-top: 32rem;
    padding: 0 44rem 0 41rem;
    box-sizing: border-box;
}
.town-title{
    width: 100%;
    height: 16rem;
    padding: 0 16rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}
.town-left{
    width: 16rem;
    height: 16rem;
    background-image: url("../images/fs/townLeft.png") ;
    background-size: 100% 100%;
    flex-shrink:0;
}
.town-text{
    text-align: left;
    line-height: 16rem;
    font-size: 14rem;
    color: var(--white);
    font-weight: 600;
    height: 16rem;
    text-shadow: 0 0 8rem #0092FF;
    margin: 0 7rem;
    flex-shrink:0;
}
.town-line{
    height: 1rem;
    background: #1B7EF2;
    margin-right: 7rem;
    flex-grow: 1;
}
.town-icon{
    width: 11rem;
    height: 8rem;
    background-image: url("../images/fs/townRight.png") ;
    background-size: 100% 100%;
    flex-shrink:0;
}
.town-tab{
    width: 100%;
    height: 24rem;
    padding: 0 18rem;
    margin-top: 24rem;
    box-sizing: border-box;
    display: flex;
}
.town-tab-item{
    height: 24rem;
    padding: 0 8rem;
    text-align: center;
    line-height: 24rem;
    font-size: 14rem;
    font-weight: 400;
    color: var(--three);
    cursor: pointer;
}
.town-tan-item-spec{
    background: rgba(0, 146, 255, 0.2);
    border: 1px solid rgba(0, 146, 255, 0.7);
    color: var(--white);
}
.town-list-box{
    width: 100%;
    height: 245rem;
    margin-top: 16rem;
    padding: 0 16rem;
    box-sizing: border-box;
}
.town-list-box ul{
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
.town-list-box ul li{
    width: 100%;
    height: 24rem;
    margin-bottom: 7rem;
    display: flex;
}
.town-list-box ul li:first-child{
    margin-bottom: 13rem;
    height: 16rem;
}
.town-list-box ul li:nth-child(2n){
    background: rgba(108, 128, 151, 0.2);
}
.list-index{
    width: 70rem;
    padding-left: 8rem;
    text-align: left;
    line-height:24rem;
    flex-shrink: 0;
    font-size: 14rem;
    font-weight: 400;
    color: var(--three);
}
.list-name{
    flex-grow: 1;
    text-align: left;
    line-height: 16rem;
    font-size: 14rem;
    font-weight: 400;
    color: var(--three);
}
.list-num{
    flex-shrink: 0;
    width: 92rem;
    text-align: left;
    line-height: 16rem;
    font-size: 14rem;
    font-weight: 400;
    color: var(--three);
}
.item-index{
    width: 70rem;
    padding-left: 14rem;
    text-align: left;
    line-height:24rem;
    flex-shrink: 0;
    font-size: 14rem;
    font-weight: 700;
    color: var(--white);
}
.item-name{
    flex-grow: 1;
    text-align: left;
    line-height: 24rem;
    font-size: 14rem;
    font-weight: 400;
    color: var(--white);
}
.item-num{
    flex-shrink: 0;
    width: 92rem;
    text-align: left;
    line-height:24rem;
    font-size: 14rem;
    font-weight: 400;
    color: var(--three);
}
.fs-right{
    position: absolute;
    top: 0;
    right: 24rem;
    z-index: 100;
    width: 514rem;
    height: 100%;
    padding: 102rem 0 18rem 0;
    box-sizing: border-box;
}
.right-box{
    width: 100%;
    height: 100%;
    background-image: url("../images/fs/right.png") ;
    background-size: 100% 100%;
}
.count-box{
    width: 100%;
    height: 468rem;
    padding:44rem 42rem 0 43rem;
    box-sizing: border-box;
}
.count-con{
    width: 100%;
    height: 368rem;
    padding: 0 16rem;
    box-sizing: border-box;
    margin-top: 20rem;
}
.count-item{
    width: 100%;
    height: 80rem;
    margin-bottom: 16rem;
}
.count-item:last-child{
    margin-bottom: 0;
}
.count-item-con{
    width: 100%;
    height: 52rem;
    margin-top: 12rem;
    display: flex;
    justify-content: space-between;
}
.count-item-list{
    width: 127rem;
    height: 100%;
}
.count-list-title{
    width: 100%;
    height: 16rem;
    position: relative;
}
.count-title-text{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 16rem;
    font-size: 14px;
    color: var(--three);
    font-weight: 600;
    z-index:9;
}
.count-title-bg{
    width: 100%;
    height: 6rem;
    position: absolute;
    top: 6rem;
    left: 0;
    background: rgba(108, 128, 151, 0.2) ;
}
.count-num{
    width: 100%;
    height: 32rem;
    margin-top: 4rem;
    background:rgba(108, 128, 151, 0.2) ;
    text-align: center;
    line-height: 32rem;
    font-size: 12rem;
    font-weight: 600;
    color: var(--white);
    text-shadow: 0 0 8rem #0075FF;
}
.count-num{
    font-size: 20rem;
    font-weight: 700;
    margin-right: 2rem;
}
.per-count-box{
    width: 100%;
    height: 430rem;
    margin-top: 40rem;
    padding: 0 42rem 0 43rem;
}
.per-count-map{
    width: 100%;
    height: 362rem;
    margin-top: 24rem;
    padding: 0 16rem;
    box-sizing: border-box;
}
.per-count-tab-box{
    width: 100%;
    height: 24rem;
    display: flex;
}
.per-count-tab-item{
    padding: 0 8rem;
    text-align: center;
    line-height: 24rem;
    font-size: 14rem;
    color: var(--white);
    font-weight: 400;
    cursor: pointer;
}
.per-spec-tab{
    background: rgba(0, 146, 255, 0.2);
    border: 1px solid rgba(0, 146, 255, 0.7);
    color: var(--white);
}
.per-map-box{
    width: 100%;
    height: 320rem;
    margin-top: 24rem;
}













/*地图控件*/
.map_tl {
    position: absolute;
    bottom: 90rem;
    right: 562rem;
    font-size: 18rem;
    width: 150rem;
    color: #fff;
    font-family: YouSheBiaoTiHei;
    z-index: 5;
}
.map_tl input {
    margin: 10rem;
}
